<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>


<script>
    //1.创建一个自带属性与方法的自定义对象
    let p1 = {
        name: '张三',
        age: 18,
        say: function () {
            console.log('我是' + this.name + '今年' + this.age + '岁了！');
        }
    }
    console.log(p1);
    p1.say();
    let p2 = {}

    //2.创建一个不带属性与方法的自定义对象
    p2.name = '李四';
    p2.age = 25;
    p2.say = function () {
        console.log('我是' + this.name + '今年' + this.age + '岁了！');
    }
    console.log(p2);
    p2.say();
    //3.定义一个数组，模拟从服务器请求回来多个商品对象
    let productArr = [
        {title: '小米14', price: 8000, num: 200},
        {title: '华为Mate 40', price: 5000, num: 100},
        {title: '苹果16', price: 10000, num: 700},
        {title: '魅族', price: 2000, num: 600},
        {title: 'oppo', price: 6000, num: 500}
    ]
    console.log(productArr);
    console.log(productArr[2]);

    // for (var i = 0; i < productArr.length; i++) {
    //     let trE = document.createElement('tr');
    //     let titleTD = document.createElement('td');
    //     let priceTD = document.createElement('td');
    //     let numTD = document.createElement('td');
    //     titleTD.innerHTML = productArr[i].title;
    //     priceTD.innerHTML = productArr[i].price;
    //     numTD.innerHTML = productArr[i].num;
    //     trE.append(titleTD, priceTD, numTD);
    //     let tableE = document.querySelector('table');
    //     tableE.append(trE);
    // }
    for(let pro of productArr){
        let trE = document.createElement('tr');
        let titleTD = document.createElement('td');
        let priceTD = document.createElement('td');
        let numTD = document.createElement('td');
        titleTD.innerHTML = pro.title;
        priceTD.innerHTML = pro.price;
        numTD.innerHTML = pro.num;
        trE.append(titleTD, priceTD, numTD);
        let tableE = document.querySelector('table');
        tableE.append(trE);
    }

</script>
</body>
</html>